<template>
  <div class="row audio-volume-popup view-border no-wrap">
    <div
      class="original column no-wrap justify-between items-center"
      v-if="hasOriginal"
    >
      <q-slider
        v-model="originalVolume"
        :min="0"
        :max="1"
        :step="0.1"
        color="accent"
        vertical
        reverse
        dense
        style="height: 98px"
      />
      <q-avatar class="q-mt-sm" style="width: 34px; height: 34px">
        <q-img :src="originalAudio!.creatorAvatar"> </q-img>
      </q-avatar>
    </div>
    <q-separator v-if="hasOriginal" vertical />
    <div class="current column no-wrap justify-between items-center">
      <q-slider
        v-model="currentVolume"
        :min="0"
        :max="1"
        :step="0.1"
        color="accent"
        vertical
        reverse
        dense
        style="height: 98px"
      />
      <q-avatar class="q-mt-sm" style="width: 34px; height: 34px">
        <q-img :src="currentAudio!.creatorAvatar"> </q-img>
      </q-avatar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useVideoStore } from 'src/stores/video-store.js';
import { computed, ref, onMounted } from 'vue';
const videoStore = useVideoStore();
const originalAudio = computed(() => videoStore.originalAudio);
const currentAudio = computed(() => videoStore.currentAudio);
const hasOriginal = ref(false);
const originalVolume = computed({
  get() {
    return videoStore.originalVolume;
  },
  set(val: number) {
    videoStore.originalVolume = val;
  },
});
const currentVolume = computed({
  get() {
    return videoStore.videoVolume;
  },
  set(val: number) {
    videoStore.videoVolume = val;
  },
});
onMounted(() => {
  if (originalAudio.value && currentAudio.value) {
    if (originalAudio.value.id === currentAudio.value.id) {
      hasOriginal.value = false;
    } else {
      hasOriginal.value = true;
    }
  }
});
</script>
<style lang="scss" scoped>
.audio-volume-popup {
  .original {
    padding: 15px 10px;
  }
  .current {
    padding: 15px 10px;
  }
}
.view-border {
  border: 1px solid #404040;
  border-radius: 6px;
  background-color: rgba(35, 35, 35, 1);
}
</style>
